<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>提交简历</title>
    <style type="text/css">
        .ooo {
            text-align: center;
        }

        .one {
            border-style: dashed;
            width: 290px;
            height: 290px;
            border-color: rgb(0, 0, 0);
            background: url(https://c-ssl.duitang.com/uploads/blog/202107/07/20210707152808_fea0e.jpeg) no-repeat center center;
            background-size: 100%;
        }

        body {
            font-family: "微软雅黑";
        }

        body {
            background: url(http://pic.616pic.com/ys_bnew_img/00/04/65/KrArC3QtaS.jpg) no-repeat center center fixed;
            background-size: 100%;
        }

        .all {
            width: 1024px;
            height: 863px;
            margin: 0 auto;

        }

        .list {
            width: 300px;
            padding: 180px 0 0 340px;
            text-align: center;
        }

        p {
            margin-top: 20px;
            text-align: center;
        }
        .picture{
            border-style: dashed;
            width: 290px;
            height: 290px;
          border:1px solid #000;
          background: url(https://c-ssl.duitang.com/uploads/blog/202107/07/20210707152808_fea0e.jpeg) no-repeat center center;
      }
      #img_span img{
          width: 100px;
          height: 100px;
          margin-right: 20px;
          margin-top: 20px;

      }
    </style>
    <script type="text/javascript">
        function checkInput() {
            var nl = document.getElementById('ll').value;
            if (nl == '') {
                alert('请输入年龄');
                return false;
            }
            if (nl <=0){
                alert('不是，兄弟？');
                return false;

            }
            if (nl > 0 && nl <= 17) {
                alert('小学生，来干什么。');
                return false;
            }
            if (nl > 35 && nl <= 50) {
                alert('35岁优化了就别来了');
                return false;
            }
            if (nl > 50 && nl <= 70) {
                alert('中年老大爷？？？');
                return false;
            }
            if (nl > 70) {
                alert('卧槽，6');
                return false;
            }
            else {
                alert('提交成功  ps：乱填打回');
                return true;
            }
        }
        function tj() {
            if (checkInput()) {
                
                window.location.href = "http://guozhivip.com/eat/";
                alert('好了，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事，干正事');
            }
        } 
        function gtp(){
            
        }
        var i=0;
        function changepic(obj) {
            //首先插入一个图片标签，src属性为空，宽高设置为100px，暂时设为不可见
            document.getElementById("img_span").innerHTML+="<img src=\"\" id=\"show"+i+"\" width=\"200\" style=\"opacity: 0;\">"; 
            //调用getObjectURL函数，返回上传的图片的地址
            var newsrc=getObjectURL(obj.files[0]);
            document.getElementById('show'+i).src=newsrc;//将图片的路径设置为返回上传的图片的地址
            document.getElementById("show"+i).style.opacity=1;//将图片设置为可见
            i++;
        }
        //建立一个可存取到该file的url
        function getObjectURL(file) {
            var url = null ;
            // 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
            if (window.createObjectURL!=undefined) { // basic
                url = window.createObjectURL(file) ;
            } else if (window.URL!=undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file) ;
            } else if (window.webkitURL!=undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file) ;
            }
            return url ;
        }
    </script>
</head>
<body>
    <div class="all">
        <form class="list" action="#" method="post">
            <h2 class="ooo">自我介绍</h2>
            <div class="picture">
                <span id="img_span">
                     <input id="file" class="filepath" onchange="changepic(this)" type="file"><br> 
                </span>
         </div>
            <p>
                <span>姓名:</span>
                <input type="text" id="shoujihao" placeholder="请输入姓名">
            </p>
            <p>
                <span>年龄：</span>
                <input type="text" id="ll" placeholder="请输入年龄">
            </p>
            <p>
                <span>电话号码：</span>
                <input type="text" id="sho" placeholder="请输入电话号码">
            </p>
            <p>
                <span>住址：</span>
                <input type="text" id="shoujihao" placeholder="选填">
            </p>
            <span>性别</span>
            <select>
                <option>男</option>
                <option>女</option>
            </select>
            <p>
                <textarea cols="30" rows="5" class="message" id="save" placeholder="自我介绍"></textarea>
            </p>
            <button onclick="tj()">提交</button>

        </form>
    </div>
</body>

</html>